<!--  
Layout.demo.vue
-->
<template>
    <el-container class="layout-container">
        <!-- layout布局左侧菜单区 -->
        <el-aside class="aside" width="300px">
            <el-scrollbar> </el-scrollbar>
        </el-aside>

        <!-- layout布局内容区 -->
        <el-container>
            <el-header class="header"></el-header>
            <el-main class="content">
                <el-scrollbar>
                    Mainflsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddd000000000000000000000000000000000000000000000000000000000001
                    Mainflsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddd000000000000000000000000000000000000000000000000000000000002<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    Mainflsd<br />
                    jflsdjf
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { hookDesign } from "@/hooks/hookDesign";
import { hookCache } from "@/hooks/hookCache";

const { getPrefixCls } = hookDesign();
const { wsCache } = hookCache();
</script>

<style scoped lang="less">
// 定义全局变量
@color_container: rgb(17, 31, 221);
@color_aside: rgb(176, 246, 248);
@color_header: rgb(236, 213, 82);
@color_content: rgb(5, 5, 5);

.layout-container {
    height: 100%;
    background-color: @color_container;

    .aside {
        background-color: @color_aside;
    }

    .header {
        font-size: 12px;
        background-color: @color_header;
    }

    .content {
        padding: 0;
        color: red;
        background-color: @color_content;
    }
}
</style>
